<script lang="ts">
export default {
  name: 'brain'
};
</script>

<script setup lang="ts">

import {
  getBrian,
  updataBrian
} from '@/api/brain';
import { t } from '@wangeditor/editor';
import { tr } from 'element-plus/es/locale';

let formData = reactive({
  "barInteract": false,
  "digiman": false,
  "imageAD": false,
  "pptIcon": false,
  "videoAd": false,
  "videoIcon": false,
  "allSelect":false
});
let allSelect = false;

const dataList = ref([]);
function handleAllSelect(val: boolean) {
  formData.imageAD = val;
  formData.videoAd = val;
  formData.barInteract = val;
  formData.digiman = val;
}  
function handleSelectShow(val: boolean) {
  if (formData.imageAD && formData.videoAd && formData.barInteract && formData.digiman) {
    formData.allSelect = true;
  } else {
    formData.allSelect = false
  }
} 
function changeData(val:any) {
  let data = {
    "barInteract": formData.barInteract == true ? "1" :"-1",
    "digiman": formData.digiman == true ? "1" :"-1",
    "imageAD": formData.imageAD == true ?"1" :"-1",
    "pptIcon": formData.pptIcon == true ? "1" :"-1",
    "videoAd": formData.videoAd == true ? "1" :"-1",
    "videoIcon": formData.videoIcon == true ? "1" :"-1",
  }
  return data
}
function handleSave() {
  updataBrian({ data: changeData(formData) })
   .then((res) => {
    ElMessage.success('保存成功');
    })
}
/**
 * 查询
 */
function handleQuery() {
  getBrian({})
    .then((res: any) => {
      let data = res.data.data;
      let sdata = false
      if (data.imageAD==1 && data.videoAd==1 && data.barInteract==1 && data.digiman==1) {
        sdata = true
      }
      let formDatas = {
        "barInteract": data.barInteract == "1" ? true :false,
        "digiman":  data.digiman == "1" ? true :false,
        "imageAD": data.imageAD == "1" ? true :false,
        "pptIcon": data.pptIcon == "1" ? true :false,
        "videoAd": data.videoAd == "1" ? true :false,
        "videoIcon": data.videoIcon == "1" ? true : false,
        "allSelect":sdata
      }
      Object.assign(formData, formDatas);
    })
}

onMounted(async () => {

  handleQuery(); // 初始化数据
});

// watch(
//   () => queryParams.startEndTime,
//   (val: any) => {
//     if (Array.isArray(val)) {
//       queryParams.beginTime = val[0];
//       queryParams.endTime = val[1];
//     } else {
//       queryParams.beginTime = '';
//       queryParams.endTime = '';
//     }
//   }
// );


</script>

<template>
  <div class="app-container" >

    <el-row :gutter="24" style="padding: 40px 20px;">
      <el-col :lg="24" :xs="24">
        <el-form ref="form" :model="formData" label-width="160px" label-position="left">
          <el-form-item label="PPT类">
            <el-checkbox v-model="formData.pptIcon">脑机指令显示</el-checkbox>
          </el-form-item>
          <el-form-item label="视频类">
            <el-checkbox v-model="formData.videoIcon">脑机指令显示</el-checkbox>
          </el-form-item>
          <el-form-item label="琴澳land">
              <el-checkbox label="全选" v-model="formData.allSelect" @change="handleAllSelect"></el-checkbox>
          </el-form-item>
          <!-- <div >
            <sapn class="small-title">虚拟人行走&场景传送</sapn>
            <el-checkbox v-model="formData.pptIcon">脑机指令显示</el-checkbox>
          </div> -->
          <div>
            <sapn class="small-title">虚拟人行走&场景传送</sapn>
            <el-checkbox v-model="formData.digiman" @change="handleSelectShow">脑机指令显示</el-checkbox>
          </div>
          <div >
            <sapn class="small-title">图片广告牌</sapn>
            <el-checkbox v-model="formData.imageAD" @change="handleSelectShow">脑机指令显示</el-checkbox>
          </div>
          <div >
            <sapn class="small-title">视频广告牌</sapn>
            <el-checkbox v-model="formData.videoAd" @change="handleSelectShow">脑机指令显示</el-checkbox>
          </div>
          <div >
            <sapn class="small-title">酒吧内交互</sapn>
            <el-checkbox v-model="formData.barInteract" @change="handleSelectShow">脑机指令显示</el-checkbox>
          </div>
        
        </el-form>
        <div class="mb-4" style="margin-top: 60px;">
          <el-button type="primary" @click="handleSave" style="width: 80px;">保存</el-button>
        </div>
       
      </el-col>
    </el-row>
   
  </div>
</template>
<style lang="scss" scoped>
.app-container {
  .el-row{
    background-color: #fff;
  }
  .small-title {
    font-size: 13px;
    color:#666;
    line-height:32px;
    display: inline-block;
    height: 32px;
    margin-top:-2px;
    position: relative;
    top:-2px;
    width: 160px;
  }
  .mb-4 {
    .data-box {
      background: white;
      height: 130px;
      display: flex;
      justify-content: space-between;
      padding: 20px;

      .data-box-info {
        .data-box-info-value {
          text-align: center;
        }

        .data-box-info-name {
          text-align: center;
        }

        .data-box-info-title {
          font-size: 20px;
          font-weight: bold;
          margin-bottom: 10px;
        }
      }
    }
  }
}
</style>